<template>
  <div id="dv-full-screen-container" ref="fullScreenContainer">
    <template v-if="ready">
      <slot></slot>
    </template>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, Ref } from 'vue';
import autoResize from '../../autoResize';

export default defineComponent({
	name: 'DvFullScreenContainer',
	data() {
		return {
			scale: 0,
			datavRoot: '',
		};
	},
	setup() {
		let fullScreenContainer: Ref<HTMLElement | null> = ref(null);
		let ready = ref(false);
		let allWidth = ref(0);

		const afterAutoResizeMixinInit = () => {
			initConfig();
			setAppScale();
			ready.value = true;
		};
		const initConfig = () => {
			const { width, height } = { width: 1920, height: 1080 };

			allWidth.value = width;
			if (fullScreenContainer.value) {
				fullScreenContainer.value.style.width = `${width}px`;
				fullScreenContainer.value.style.height = `${height}px`;
			}
		};
		const setAppScale = () => {
			const currentWidth = document.body.clientWidth;
			if (fullScreenContainer.value) {
				fullScreenContainer.value.style.transform = `scale(${currentWidth / allWidth.value})`;
			}
		};
		const onResize = () => {
			setAppScale();
		};
		autoResize(
			fullScreenContainer,
			onResize,
			afterAutoResizeMixinInit,
			(w: number, h: number) => {},
		);
		return { ready, fullScreenContainer };
	},
});
</script>